<template>
  <div>
    <div v-transfer-dom>
      <popup v-model="isPopupShow" position="right" @on-hide="handleHide">
        <div class="popupDiv" style="width: 7.5rem;">
          <div class="main" ref="remove">
            <div class="univSearchWrap">
              <div class="univSearBox">
                <div class="header">
                  <span @click="goback">
                    <img class="imgIcon" src="~/static/images/top_icon_back.png" alt />
                  </span>
                </div>
                <div class="searchLine flex-h">
                  <img class="imgIcon" src="~/static/images/search_icon_search.png" alt />
                  <div class="flex1">
                    <search
                      :auto-fixed="false"
                      @result-click="resultClick"
                      :results="results"
                      v-model="value"
                      position="absolute"
                      auto-scroll-to-top
                      top="0.88rem"
                      @on-submit="onSubmit"
                      :placeholder="placeholderText"
                      ref="search"
                    ></search>
                  </div>
                  <div class="clears" @click="clears"></div>
                </div>
              </div>
              <scroller ref="scrollerBottom" style="top: 1.76rem;">
                <div class="scrollerDiv" v-show="commonList.length > 0">
                  <div class="describe">共{{ commonList.length }}个搜索结果</div>
                  <ul class="scrollerCheckList">
                    <li v-for="(item, index) in commonList" :key="index" @click="addOrRemove(item)">
                      <img
                        class="imgIcon"
                        src="~/static/images/search_icon_sure.png"
                        icon-class="search_icon_sure"
                        v-if="checklist.indexOf(item) !== -1"
                      />
                      <img class="imgIcon" src="~/static/images/search_icon_nor.png" v-else />
                      <span
                        :class="[checklist.indexOf(item) !== -1 ? 'selectColor': '',item.indexOf('*1')>0?'fontBold':'']"
                      >{{item.indexOf('&')>0?item.substring(0,item.indexOf('&')):item}}</span>
                    </li>
                  </ul>
                  <div style="width: 100%;height: 92px;"></div>
                </div>
                <div style="width: 100%;height: 92px;"></div>
              </scroller>

              <div class="footer" v-show="commonList.length > 0">
                <div class="left">
                  <span class="hasChoose">已选择</span>
                  <span class="selectedNum">{{ checklist.length }}</span>
                  <span class="totalNum">/{{ commonList.length }}</span>
                </div>
                <div class="right" @click="submit">确定</div>
              </div>
            </div>
          </div>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>
import { TransferDom, Popup, Search } from "vux";
import { format } from "~/plugins/filter";
import {
  getTargetAcademy,
  searchAcademy,
  getMajor,
  getCascadeArealabel
} from "~/api/volunteer";
import ls from "store2";
export default {
  props: {
    popupShow: Boolean,
    placeholderText: String,
    status: String,
    radios: String
  },
  directives: {
    TransferDom
  },
  components: {
    Popup,
    Search
    // univBox,
  },
  data() {
    return {
      isPopupShow: false,
      searchs: "",
      results: [],
      value: "",
      commonList: [],
      checklist: []
    };
  },
  watch: {
    // 根据传入的popupShow这个值来判断popup是否显示
    popupShow(type) {
      this.isPopupShow = type;
      this.commonList = [];
      this.value = "";
    },
    searchs(e) {
      console.log(e);
    }
  },
  mounted() {
    // this.getMajorData('经济')
  },
  methods: {
    getUnivAcademy() {
      let obj = {
        level: ls.get("stepOneData").level,
        province: ls.get("stepOneData").province,
        type: ls.get("stepOneData").division
      };
      getTargetAcademy(obj)
        .then(res => {
          if (res.code === "0") {
            if (res.data.length > 0) {
              let ary = [];
              res.data.forEach(item => {
                ary.push(
                  item.academyName + "&" + item.academyCode + "*" + item.sign
                );
              });
              this.commonList = ary;
            }
          }
        })
        .catch(() => {
          this.$vux.toast.text("网络错误，请稍后再试！");
        });
    },
    getCollegeData(collname) {
      let obj = {
        academyName: collname,
        level: ls.get("stepOneData").level,
        province: ls.get("stepOneData").province,
        type: ls.get("stepOneData").division
      };
      searchAcademy(obj)
        .then(res => {
          if (res.code === "0") {
            if (res.data.length > 0) {
              let ary = [];
              res.data.forEach(item => {
                ary.push(item.academyName + "&" + item.academyCode);
              });
              this.commonList = ary;
            } else {
              this.commonList = [];
              this.$vux.toast.text("无对应院校，请重新搜索");
            }
          }
        })
        .catch(() => {
          this.$vux.toast.text("网络错误，请稍后再试！");
        });
    },
    getMajorData(major) {
      getMajor(major)
        .then(res => {
          if (res.code === "0") {
            if (res.data.length > 0) {
              let ary = [];
              res.data.forEach(item => {
                ary.push(item.majorName + "&" + item.majorCode);
              });
              this.commonList = ary;
            } else {
              this.commonList = [];
              this.$vux.toast.text("无对应专业，请重新搜索");
            }
          }
        })
        .catch(() => {
          this.$vux.toast.text("网络错误，请稍后再试！");
        });
    },
    getCascadeArea(address) {
      getCascadeArealabel(address)
        .then(res => {
          if (res.code === "0") {
            if (res.data.length > 0) {
              let ary = [];
              res.data.forEach(item => {
                ary.push(item.label);
              });
              this.commonList = ary;
            } else {
              this.commonList = [];
              this.$vux.toast.text("无对应区域，请重新搜索");
            }
          }
        })
        .catch(() => {
          this.$vux.toast.text("网络错误，请稍后再试！");
        });
    },
    handleHide() {
      this.$emit("closePopUp");
    },
    goback() {
      this.$emit("closePopUp");
    },
    onSubmit() {
      this.checklist = [];
      let stat = this.status * 1;
      console.log("thisthis.value", this.value);
      this.$refs.search.setBlur();
      switch (stat) {
        case 1:
          this.getMajorData(this.value);
          break;
        case 2:
          this.getCollegeData(this.value);
          break;
        case 3:
          this.getCascadeArea(this.value);
          break;
        case 4:
          this.getCollegeData(this.value);
          break;
        default:
          this.getMajorData(this.value);
          break;
      }
    },

    resultClick(item) {
      // window.alert('you click the result item: ' + JSON.stringify(item))
      console.log("item", item);
    },
    getResult(val) {
      console.log("this.value", this.value);
      console.log("on-change", val);
    },
    clears() {
      this.value = "";
    },

    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
    addOrRemove(item) {
      if (this.checklist.indexOf(item) == -1) {
        if (this.radios == "单选") {
          if (this.checklist.length > 0) {
            this.$vux.toast.text("单选,至多选择一个");
            return false;
          }else{
            this.checklist.push(item);
          }
        }

        this.checklist.push(item);
      } else {
        this.checklist = this.checklist.filter(x => {
          return x !== item;
        });
      }
    },
    submit() {
      console.log("thischecklist", this.checklist);
      this.$emit("sendList", this.checklist);
    }
  }
};
</script>

<style lang="less" scoped>
.vux-popup-dialog {
  background: #fff;
}

.univSearchWrap {
  width: 7.5rem;
  min-height: 100vh;
  background: #fff;
  position: relative;

  .univSearBox {
    width: 7.5rem;
    padding: 0 0.3rem;
    box-sizing: border-box;
    height: auto;

    .header {
      width: 100%;
      height: 0.88rem;
      line-height: 0.88rem;
      font-size: 0.3rem;

      .imgIcon {
        width: 0.4rem;
        height: 0.4rem;
      }
    }

    .searchLine {
      width: 100%;
      height: 0.88rem;
      padding-right: 0.3rem;
      box-sizing: border-box;
      border-bottom: 1px solid rgba(238, 238, 238, 1);
      padding-left: 0.08rem;
      padding-bottom: 0.05rem;
      overflow: hidden;

      .clears {
        width: 0.6rem;
        height: 0.88rem;
        line-height: 0.88rem;

        // align-items: center;
        // overflow: hidden;
      }

      .imgIcon {
        width: 0.4rem;
        height: 0.4rem;
        margin-top: 0.24rem;
      }
    }

    .searchLine /deep/ .weui-search-bar {
      background-color: none;
      padding: 0;
    }

    .searchLine /deep/ .weui-search-bar:before {
      border: none;
      height: 0;
    }

    .searchLine /deep/ .weui-search-bar:after {
      border: none;
      height: 0;
    }

    .searchLine /deep/ .weui-search-bar__box {
      padding-left: 0.2rem;
      height: 0.88rem;
      // background: red;
    }

    /deep/ .weui-search-bar__box .weui-search-bar__input {
      background: #fff !important;
    }

    /deep/.weui-search-bar__form {
      background: #fff !important;
    }

    .searchLine /deep/ .weui-search-bar__form:after {
      border: none;
      border-radius: 0;
    }

    .searchLine
      /deep/
      .weui-search-bar.weui-search-bar_focusing
      .weui-search-bar__cancel-btn {
      display: none !important;
    }

    .searchLine /deep/ .weui-search-bar__box .weui-icon-clear {
      display: none !important;
    }

    .searchLine /deep/ .weui-icon-search:before,
    .searchLine /deep/ .weui-search-bar__label {
      display: none !important;
    }

    .searchLine /deep/ .weui-search-bar__label span {
      display: none;
    }

    .searchLine /deep/ .weui-search-bar__box .weui-search-bar__input {
      height: 0.88rem;
      line-height: 0.88rem;
      font-size: 0.34rem;
      position: absolute;
    }
  }

  .scrollerDiv {
    padding: 0.3rem;
    box-sizing: border-box;

    .describe {
      font-size: 0.26rem;
      color: #bbb;
      font-weight: bold;
      // margin-top: 0.6rem;
      margin-bottom: 0.2rem;
    }

    .scrollerCheckList /deep/ .weui-cells:before {
      border: none;
      left: 0;
    }

    .scrollerCheckList {
      list-style: none;
      padding-left: 0;

      li {
        display: flex;
        align-items: center;
        width: 100%;
        height: 0.9rem;
        line-height: 0.9rem;
        border-bottom: 1px solid #eee;
        padding-left: 0.3rem;

        .imgIcon {
          width: 0.4rem;
          height: 0.4rem;
        }

        span {
          font-size: 0.3rem;
          margin-left: 0.28rem;
          color: #222;
          letter-spacing: 0.03rem;
        }

        span.selectColor {
          color: @mainColor;
          // font-weight: bold;
        }
        .fontBold {
          font-weight: 800;
        }
      }
    }
  }

  .footer {
    width: 100%;
    height: 1.2rem;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    box-shadow: 0px -4px 10px 0px rgba(204, 204, 204, 0.2);
    color: #ccc;
    padding: 0 0.3rem;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .left {
      display: flex;
      align-items: center;

      .hasChoose {
        color: #222;
        font-size: 0.26rem;
        font-weight: bold;
        margin-right: 0.2rem;
      }

      .selectedNum {
        color: @mainColor;
        font-size: 0.4rem;
        margin-right: 0.07rem;
      }

      .totalNum {
        color: #bbb;
        font-size: 0.22rem;
      }
    }

    .right {
      display: inline-block;
      width: 2rem;
      height: 0.7rem;
      line-height: 0.7rem;
      text-align: center;
      border-radius: 0.1rem;
      background: @mainColor;
      color: #fff;
      font-size: 0.36rem;
    }
  }
}
</style>
